<template>
	<view class="home-bg">
		<view class="health-contianer-item flex-ct" v-for="item in healthData.rows" :key="item._id">
			<view class="health-article">
				<view class="">
					{{ item.title }}
				</view>
				<text>{{ item.digest }}</text>
			</view>
			<image :src="item.insetImage" mode=""></image>
		</view>
		<view class="" v-if="healthData.total<=pageData.currentPage*pageData.pageSize"
		style="text-align: center;">
			<view style="color: #999; height: 88rpx;font-size: 24rpx;">没有更多了</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		httpPost
	} from '../../../utils/request';

	const healthData = reactive({
		rows: [],
		total: 0
	})
	const pageData = ref({
		currentPage: 1,
		pageSize: 7
	})

	const findArticles = (data) => {
		httpPost('/articles/search', data).then(res => {
			if (res.code == 200) {
				healthData.rows = [
					...healthData.rows,
					...res.data.rows];
				healthData.total = res.data.total;
			}
		})
	}

	onLoad(() => {
		findArticles(pageData.value);
	})

	onReachBottom(() => {
		if(healthData.rows.length>=healthData.total){
			uni.showToast({
				title:'没有更多了',
				duration:2000
			})
		}else{
			pageData.value.currentPage++;
			findArticles(pageData.value)
		}
		
		
	})
</script>

<style scoped lang="scss">
	.home-bg {
		background-color: $uni-pages-bg;
		padding-top: 20rpx;
	}


	.health-contianer-item {
		margin: 0 auto;
		margin-bottom: 20rpx;
		width: 670rpx;
		height: 240rpx;
		border-radius: 24rpx;
		background-color: #fff;
		display: flex;

		.health-article {
			width: 400rpx;
			height: 160rpx;
			font-size: 32rpx;
			line-height: 1.5;

			text {
				font-size: 24rpx;
				color: #999;
			}
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>